<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="new :: common_head('供能策略')">
</head>
<body >
<input type="hidden" id="graphId" th:value="${graphId}">
<div th:replace="~{new::header}"></div>
<div class="container-fluid-full">
    <div class="row-fluid">


        <!-- start: Main Menu -->
        <div id="sidebar-left" class="span2" th:fragment="sidebar_left" style="heigth:100%">
            <div class="nav-collapse sidebar-nav">
                <ul class="nav nav-tabs nav-stacked main-menu" >

                    <li >
                        <a class="dropmenu" id="deviceManage" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> 设备管理</span></a>
                        <ul>
                            <li ><a id="lidevice.html" class="submenu" th:href="@{/device.html}"><i class="icon-file-alt"></i><span
                                    class="hidden-tablet">设备展示</span></a>
                            </li>
                        </ul>
                    </li>
                    <!--<li><a  id="listrategy" th:href="@{/strategy.html}"><i class="icon-edit"></i><span class="hidden-tablet"> 储能策略</span></a></li>-->
                    <li><a  id="liele" th:href="@{/property/electricityPrice}"><i class="icon-star"></i><span class="hidden-tablet"> 电价</span></a></li>
                    <li><a  id="lichart1" th:href="@{/chart1.html}"><i class="icon-search"></i><span class="hidden-tablet"> 知识图谱</span></a></li>
                    <!--<li><a  id="lichart2" th:href="@{/chart2.html}"><i class="icon-move"></i><span class="hidden-tablet"> 拖动图谱</span></a></li>-->
                    <li><a  id="lichart3" th:href="@{/energyType/viewEnergyType}"><i class="icon-bookmark"></i><span class="hidden-tablet"> 能源属性</span></a></li>
                    <li><a  id="lichart4" th:href="@{/graphInfo/viewGraphInfo}"><i class="icon-file-alt"></i><span class="hidden-tablet"> 图谱管理</span></a></li>
                    <li><a  id="lichart5" th:href="@{/relationship/viewRelationship}"><i class="icon-file-alt"></i><span class="hidden-tablet"> 边管理</span></a></li>
                    <li><a  id="lichart6" th:href="@{/relationship/viewDragPage}"><i class="icon-move"></i><span class="hidden-tablet"> 拖拽图谱</span></a></li>
                </ul>
            </div>
        </div>
        <!-- end: Main Menu -->
        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10">

            <!--<input type="hidden" id="graphId" th:value="${graphId}">-->
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a th:href="@{/new.html}">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">知识图谱</a></li>
            </ul>
            <div  class="container" style="margin-left:0px"><!-- 跳转开始 -->
                <ul id="mytab1" class="nav nav-pills nav-justified" role="tablist">
                    <li th:each="graph,graphStat:${graphList}" role="presentation"
                        th:class="${graphStat.index}==0?'active':''" th:id="'li'+${graph.graphId}">
                        <a th:href="@{/relationship/viewDragPage/}+${graph.graphId}" th:text="${graph.graphName}"></a></li>
                </ul>
            </div><!-- 跳转结束 -->
            <div style="position: absolute;top: 80px;right: 50px;z-index: 999">
                <button class="button-login" type="button" id="saveV">保存</button>
            </div>
            <div class="row-fluid sortable" >
                <div     style="width:100%;height:900px;background-color: #578ebe">
                    <div id="graphContainer"
                         style="position:relative;width:100%;height:800px;cursor:default;">
                    </div>
                </div><!--/span-->
                <!--<button class="button-login" type="button" onclick="drawChart1()">生成策略</button>-->
            </div><!--/row-->
        </div><!--/.fluid-container-->
        <!-- end: Content -->
    </div><!--/#content.span10-->
</div><!--/fluid-row-->
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<!--<script th:src="@{/js/jquery-migrate-1.0.0.min.js}"></script>-->

<!--<script th:src="@{/js/jquery-ui-1.10.0.custom.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.ui.touch-punch.js}"></script>-->

<!--<script th:src="@{/js/modernizr.js}"></script>-->

<script th:src="@{/js/bootstrap.js}"></script>

<!--<script th:src="@{/js/jquery.cookie.js}"></script>-->

<!--<script th:src='@{/js/fullcalendar.min.js}'></script>-->

<!--<script th:src='@{/js/jquery.dataTables.min.js}'></script>-->

<!--<script th:src="@{/js/excanvas.js}"></script>-->
<!--<script th:src="@{/js/jquery.flot.js}"></script>-->
<!--<script th:src="@{/js/jquery.flot.pie.js}"></script>-->
<!--<script th:src="@{/js/jquery.flot.stack.js}"></script>-->
<!--<script th:src="@{/js/jquery.flot.resize.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.chosen.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.uniform.min.js}"></script>-->

<script th:src="@{/js/jquery.cleditor.min.js}"></script>

<!--<script th:src="@{/js/jquery.noty.js}"></script>-->

<!--<script th:src="@{/js/jquery.elfinder.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.raty.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.iphone.toggle.js}"></script>-->

<!--<script th:src="@{/js/jquery.uploadify-3.1.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.gritter.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.imagesloaded.js}"></script>-->

<!--<script th:src="@{/js/jquery.masonry.min.js}"></script>-->

<!--<script th:src="@{/js/jquery.knob.modified.js}"></script>-->

<!--<script th:src="@{/js/jquery.sparkline.min.js}"></script>-->

<!--<script th:src="@{/js/counter.js}"></script>-->

<!--<script th:src="@{/js/retina.js}"></script>-->

<script th:src="@{/js/custom.js}"></script>
<!--<script th:src="@{/js/TweenMax.min.js}"></script>-->
<!--<script th:src="@{/js/device.js}"></script>-->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/mxClient.js}"></script>
<script th:src="@{/js/mxClient.min.js}"></script>
<!--<script th:src="@{/js/jquery-1.9.1.min.js}"></script>-->
<!--<script th:src="@{/layer/layer.js}"></script>-->
<script>
    //获取当前点击的设备菜单，添加高亮显示
    // $(document).ready(function () {
    //     var location=window.location.href;
    //     var id=location.substring(location.lastIndexOf('/')+1);
    //     console.log(id);
    //     $("#"+"li"+id).addClass("active");
    //     console.log("开始1");
    // })
    // $(function(){
    //     console.log("开始")
    // })
</script>
<script>
    mxBasePath='../static';
</script>
<!-- Example code -->
<script type="text/javascript">
    // var graph = new mxGraph(document.getElementById("graphContainer"));
     $(function(){
         var location=window.location.href;//获取网页地址
         console.log(location);
         var id=location.substring(location.lastIndexOf('/')+1);//获取/后的id
         console.log("当前id"+id);
         $("#"+"li"+id).addClass("active");//对应li高亮
     })
    // $(document).ready(function () {
    //
    // })
    var graph=document.getElementById("graphId");
    console.log(graph.value);
    window.onload = function () {
            var location=window.location.href;
            var id=location.substring(location.lastIndexOf('/')+1);
            console.log(id);
            $("#"+"li"+id).addClass("active").siblings().removeClass("active");
            console.log("开始1");
        main(document.getElementById("graphContainer"),graph.value);
    };

    function main(container,graphId)
    {
        // 判断浏览器是否支持
        if (!mxClient.isBrowserSupported())
        {
            // mxUtils报错提示
            mxUtils.error('Browser is not supported!', 200, false);
        }
        else
        {
            var graph = new mxGraph(container);

            //去锯齿效果
            mxRectangleShape.prototype.crisp = true;
            // 显示导航线
            mxGraphHandler.prototype.guidesEnabled = true;
            // Alt键禁用导航线
            mxGuide.prototype.isEnabledForEvent = function (evt) {
                return !mxEvent.isAltDown(evt);
            };
            // 显示终点
            mxEdgeHandler.prototype.snapToTerminals = false;
            // 禁用浏览器默认的右键菜单栏
            mxEvent.disableContextMenu(container);

            // 在已有容器内构造一个graph
            // 鼠标框选
            new mxRubberband(graph);
            // 在图形中创建默认组件
            var parent = graph.getDefaultParent();
            // 只可预览不可选中拖动连接
            graph.setEnabled(true);
            // 容器大小自适应
            graph.setResizeContainer(true);
            // 动态改变样式
            graph.getView().updateStyle = true;
            // 可否重复连接
            graph.setMultigraph(false);
            // 禁止改变元素大小
            graph.setCellsResizable(false);
            // 允许连线的目标和源是同一元素
            graph.setAllowLoops(true);
            // graph.setCellsLocked(false);
            // 开始往module里添加cell
            graph.getModel().beginUpdate();
            try
            {
                //new一个cell 以单元的形式创建一个节点
                // var cell = new mxCell(null, new mxGeometry(100, 200, 100, 100), "一些样式配置");//节点创建
                // cell.vertex = true;
                // //插入这个cell
                // graph.addCell(cell); //添加节点

                // var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                // var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                // console.log(typeof v1);
                //插入线条设置连接图形
                $.ajax({
                    type: "GET",
                    url: "/power/relationship/getGraphDragChart/"+graphId,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        console.log("data"+data);
                        console.log(typeof  data);
                        console.log(typeof data.node);
                        if (data.node.length==0) {
                            console.log(1);
                            layer.alert('当前图谱无设备，请添加！', {

                                icon: 5,

                                title: "提示"

                            });
                            return false;

                        }
                        else {
                        var node = data.node;//设备
                        var edge = data.edge;//边
                        var nodeLength = data.node.length;//设备长度
                        var edgeLength = data.edge.length;//边长度
                        console.log(edge);
                        console.log(node);
                        console.log("长度为:" + nodeLength);
                        var vertext = [];//存放节点名称变量的数组
                        var style = {};
                        var styleName = [];//存放样式名称的数组
                        for (var j = 0; j < nodeLength; j++) {
                            vertext[j] = {};
                            var style = graph.getStylesheet().getDefaultVertexStyle();//获取默认样式
                            var style1 = mxUtils.clone(style);//拷贝默认样式
                            style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
                            style1[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
                            style1[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
                            style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;

                            style1[mxConstants.STYLE_STROKECOLOR] = "transparent"; //背景边框
                            style1[mxConstants.STYLE_FILLCOLOR] = "transparent";//填充颜色
                            style1[mxConstants.STYLE_FONTCOLOR] = "white";//字体颜色
                            style1[mxConstants.STYLE_FONTSIZE] = "14";//字体大小


                            style1[mxConstants.LABEL_HANDLE_SIZE] = 10; //标签大小
                            style1[mxConstants.STYLE_IMAGE_WIDTH] = 50;//图片宽高
                            style1[mxConstants.STYLE_IMAGE_HEIGHT] = 50;
                            style1[mxConstants.STYLE_IMAGE] = node[j].picPath;//图片路径
                            styleName[j] = 'style' + j;
                            graph.getStylesheet().putCellStyle(styleName[j], style1);//将样式放入全局
                            vertext[j] = graph.insertVertex(parent, node[j].deviceId,
                                node[j].deviceName, node[j].coordinate[0], node[j].coordinate[1], 80, 80, styleName[j]);
                            // console.log(vertext[j]);
                        }
                        //  for(var i=0;i<edgeLength;i++){
                        //     graph.insertEdge(parent,null,'',graph.insertVertex(parent, edge[i].desc.split("#")[0], edge[i].deviceName[0], edge[i].line[0][0], edge[i].line[0][1], 80, 30),
                        //         graph.insertVertex(parent, edge[i].desc.split("#")[1], edge[i].deviceName[1], edge[i].line[1][0], edge[i].line[1][1], 80, 30))
                        // }

                        var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                        var styleEdge1 = mxUtils.clone(styleEdge);
                        styleEdge1[mxConstants.STYLE_FONTCOLOR] = "white";
                        styleEdge1[mxConstants.STYLE_FONTSIZE] = "14";
                        styleEdge1[mxConstants.STYLE_STROKECOLOR] = "white";

                        graph.getStylesheet().putCellStyle('styleEdge1', styleEdge1);
                        for (var indexV = 0; indexV < nodeLength; indexV++) {
                            for (var i = 0; i < nodeLength; i++) {
                                var desc = node[indexV].deviceId.toString() + "#" + node[i].deviceId.toString();
                                for (var j = 0; j < edgeLength; j++) {
                                    if (desc == edge[j].desc) { //边匹配
                                        graph.insertEdge(parent, null, '传递', vertext[indexV], vertext[i], 'styleEdge1');

                                    }
                                }

                            }
                        }
                    }
                    }
                })
                // var e1 = graph.insertEdge(parent, null, '', graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30), graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30));

                //预览时鼠标悬浮到节点时，改变鼠标样式
                graph.getCursorForCell = function (cell) {
                    if (cell != null && cell.value != null && cell.vertex == 1) {
                        return 'pointer';
                    }
                };
                $("#saveV").click(function(){
                    var encoder = new mxCodec(); //
                    var node = encoder.encode(graph.getModel());
                    var xml=mxUtils.getXml(node);
                    console.log(xml);
                    console.log(typeof xml);
                    $.ajax({
                        type: "GET",
                        url: "/power/device/updateDeviceCoordinates",
                        dataType: "json",
                        async:false,
                        data:{xmlString:xml},
                        success: function (data) {
                            if(data.message=='success'){
                                layer.alert('保存成功!', {

                                    icon: 6,

                                    title: "提示"

                                });
                            }
                        }
                    })
                })

            }
            finally
            {
                // 更新事务结束
                graph.getModel().endUpdate();
            }
        }
    };

    // function create_variable(num){
    //
    //   var name = "test_"+num;   //生成函数名
    //   window[name]={};
    //   window['name'];   //注意看中括号里的内容加引号和不加引号的区别
    // }
    //  create_variable(13);
    //  console.log(test_13);
</script>
</body>
</html>